﻿@{
    ViewBag.Title = "Playground";
}

<h2>Jies</h2>

<div>
    <input id="searchInput" style="width:250px;" />
    <a id="searchLink" class="button_link" href="#">
        <span class="search">Search</span>
    </a>
</div>
    
<table style="float:left;">
    <thead>
        <tr>
            <th></th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody id="jiesTableBody">
            
    </tbody>
</table>

<script id="jiesTableRowTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>
            <a class="button_link" cmd="delete" cmdarg="${ID}" href="#">
                <span class="delete">Delete</span>
            </a>
        </td>
        <td>
            <a href="#" cmd="edit" cmdarg="${ID}">
                <span>${Title}</span>
            </a>
        </td>
    </tr>
</script>

<div id="playgroundMap" style="height:600px;width:600px;float:right;">
</div>

<div style="clear:both;">
</div>

<ul class="buttonList">
    <li>
        <a id="refreshListLink" class="button_link" href="#">
            <span class="refresh">Refresh</span>
        </a>
    </li>
    <li>
        <a id="newJieLink" class="button_link" href="#">
            <span class="new">New Jie</span>
        </a>
    </li>
    <li>
        <a id="initStorageLink" class="button_link" href="#">
            <span>Init storage</span>
        </a>
    </li>
    <li>
        <a id="createSamplesLink" class="button_link" href="#">
            <span>Create Samples</span>
        </a>
    </li>
</ul>

<script type="text/javascript">
    var playgroundMapObj;

    $(document).ready(function () {

        //Bind UI events
        $('#refreshListLink').click(function () {
            refreshJiesList();
            return false;
        });
        $('#searchLink').click(function () {
            refreshJiesList();
            return false;
        });
        $('#newJieLink').click(function () {
            webjies.jieDialogJSON.open({}, refreshJiesList);
            return false;
        });
        $('#editJieLink').click(function () {
            webjies.jieDialogJSON.open({}, refreshJiesList);
            return false;
        });
        $('#initStorageLink').click(function () {
            webjies.initStorage(refreshJiesList);
            return false;
        });
        $('#createSamplesLink').click(function () {
            webjies.createSamples(refreshJiesList);
            return false;
        });
        $('#jiesTableBody a[cmd]').live("click", function () {
            var cmd = $(this).attr('cmd');
            if (cmd == 'edit') {
                var jie = webjies.getJie($(this).attr('cmdarg'), function (data) {
                    webjies.jieDialogJSON.open(data, refreshJiesList);
                });
            }
            else if (cmd == 'delete')
                webjies.deleteJie($(this).attr('cmdarg'), refreshJiesList);
            return false;
        });

        playgroundMapObj = webjies.map($('#playgroundMap'));

        //Load the list of jies
        refreshJiesList();
    });

    function refreshJiesList() {
        webjies.search($('#searchInput').val(), function (data) {
            $('#jiesTableBody').empty();

            $("#jiesTableRowTemplate").tmpl(data).appendTo("#jiesTableBody");

            playgroundMapObj.clear();

            //Load each jie and add to the map
            var jieList = new Array();
            var loadedJies = 0;
            for (var i = 0; i < data.length; i++) {
                webjies.getJie(data[i].ID, function (jie) {
                    jieList.push(jie);
                    loadedJies++;

                    //On last jie
                    if (loadedJies == data.length)
                        playgroundMapObj.loadJies(jieList);
                });
            }
        });
    }

    webjies.jieDialogJSON = {
        jie: null,

        open: function (jie) {
            this.init();

            if (jie == null)
                jie = {};

            webjies.jieDialogJSON.jie = jie;

            $('#jieDialogJSON textarea').val(jQuery.toJSON(jie));

            $('#jieDialogJSON').dialog('open');
        },

        close: function () {
            $('#jieDialogJSON').dialog('close');
        },

        onOK: function () {
            webjies.jieDialogJSON.jie = jQuery.parseJSON($('#jieDialogJSON textarea').val());
            webjies.insertOrUpdateJie(webjies.jieDialogJSON.jie,
                                function (data) {
                                    webjies.jieDialogJSON.jie = data;
                                    refreshJiesList();
                                    webjies.jieDialogJSON.close();
                                }
                            );
        },
        onCancel: function () {
            webjies.jieDialogJSON.close();
        },

        init: function () {

            if (!$('#jieDialogJSON').length) {
                $('body').append('<div id="jieDialogJSON" title="Jie JSON"><form action="#"><textarea rows="10" style="width:100%;"></textarea></form></div>');

                $('#jieDialogJSON').dialog(
                {
                    autoOpen: false,
                    width: 300,
                    buttons:
                    {
                        'Ok': webjies.jieDialogJSON.onOK,
                        'Cancel': webjies.jieDialogJSON.onCancel
                    }
                });
            }
        }
    };
</script>
